<template>
  <div class="contain">
    <!-- 大标题 -->
    <el-row class="title">
      <div>等离子工位设备状态</div>
    </el-row>
    <div class="content_main">
      <div class="lefttop-content quarter-div">
        <div class="smallTitle">设备能耗状态</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div style="margin-left:20px;margin-top:40px;font-size:18px">
              <span style=" background-color: #33c073;">累计运行时间</span>
              <span style="margin-left:35px; background-color: #33c073;">{{totalTime}} h</span>
            </div>
            <div style="margin-left:20px;margin-top:20px;font-size:18px">
              <span style=" background-color: #33c073;">累计消耗电能</span>
              <span style="margin-left:35px;background-color: #33c073;">{{totalEnergy}} KWh</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div id="CurrentChart"></div>
          </el-col>
          <el-col :span="8">
            <div id="VolChart"></div>
          </el-col>
        </el-row>
        <div id="chart1" />
      </div>
      <div class="quarter-div">
        <div class="smallTitle">设备点检状态</div>
        <div style="height:90%; padding:10px">
          <el-table height="100%"
                    :data="checkList"
                    :header-cell-style="headerStyle"
                    :cell-style="cellStyle"
                    border>
            <el-table-column label="点检时间"
                             align="center"
                             prop="Id" />
            <el-table-column label="操作者"
                             align="center"
                             prop="UserName" />
            <el-table-column label="设备"
                             align="center"
                             prop="RealName" />
            <el-table-column label="部位"
                             align="center"
                             prop="RealName" />
            <el-table-column label="异常描述"
                             align="center"
                             prop="Email" />
            <el-table-column label="处理方法"
                             align="center"
                             prop="Phone" />
            <el-table-column label="状态"
                             align="center"
                             prop="Status" />
          </el-table>
        </div>

      </div>
      <div class="quarter-div">
        <div class="smallTitle">设备监测点状态</div>
        <div style="height:90%; padding:10px">
          <el-table height="100%"
                    :data="devicePassList"
                    :header-cell-style="headerStyle"
                    :cell-style="cellStyle"
                    border>
            <el-table-column label="监测点名称"
                             align="center"
                             prop="PassName1" />
            <el-table-column label="上限值"
                             align="center"
                             prop="upLimitData1" />
            <el-table-column label="下限值"
                             align="center"
                             width="80px"
                             prop="lowLimitData1" />
            <el-table-column label="当前值"
                             align="center"
                             prop="Value1" />
            <el-table-column label="监测点名称"
                             align="center"
                             prop="PassName2" />
            <el-table-column label="上限值"
                             align="center"
                             prop="upLimitData2" />
            <el-table-column label="下限值"
                             width="80px"
                             align="center"
                             prop="lowLimitData2" />
            <el-table-column label="当前值"
                             align="center"
                             prop="Value2" />
          </el-table>
        </div>
      </div>
      <div class="quarter-div">
        <div class="smallTitle">异常提示框</div>
        <div style="padding:10px;height:45%">

          <el-table height="100%"
                    :data="checkAlarmList"
                    :header-cell-style="headerStyle"
                    :cell-style="cellStyle"
                    border>
            <el-table-column label="点检时间"
                             align="center"
                             prop="Id" />
            <el-table-column label="操作者"
                             align="center"
                             prop="UserName" />
            <el-table-column label="设备"
                             align="center"
                             prop="RealName" />
            <el-table-column label="部位"
                             align="center"
                             prop="RealName" />
            <el-table-column label="异常描述"
                             align="center"
                             prop="Email" />
            <el-table-column label="处理方法"
                             align="center"
                             prop="Phone" />
            <el-table-column label="状态"
                             align="center"
                             prop="Status" />
          </el-table>
        </div>

        <div style="height:45%;margin-left:10px">
          <div class="alarmdiv">
            <div>设备状态异常报警:</div>
            <div v-text="alarmMsg"
                 style="white-space: pre-wrap;margin-top:10px"></div>
          </div>
          <div style="float:left;margin-left:20px">
            <img src="@/assets/images/stop.jpg"
                 width="150px"
                 height="150px" />
            <div ref="stop"
                 style="background-color: green;text-align:center">设备紧急停止</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {GetRealEnergyData, GetRealPassData,MonthEnergyUsed } from "@/api/devicemanage/devicedata";
import { GetDayliyAlarmInfo } from "@/api/devicemanage/devicealarm";
export default {
  name: "Realcharts",
  components: {},
  data() {
    return {
      startTime: new Date(),
      deviceId: 1001, //等离子
      timer: null,
      alarmMsg: "2021-12-12 12:12:12 电流超出上下限",
      totalTime: 1125,
      totalEnergy: 52131,
      CurrentChart: null,
      VolChart: null,
      chart1: null,
      Voloption: null,
      Currentoption: null,
      CurrentValue:0,
      VolValue:0,

      option1: null,
      XData: [],
      YData:[], //能耗Y数据
      devicePassList: [], //设备通道数据 表格
      checkList: [], // 点检状态表
      checkAlarmList: [], // 点检异常表
    };
  },
  mounted() {
    for (let i = 0; i < 31; i++) {
      this.XData.push(i + 1);
    }
    this.initChart();
    this.GetRealPassData();
    this.MonthEnergyUsed(this.deviceId);
    this.GetDayliyAlarmInfo(this.deviceId);
    this.GetRealEnergyData(this.deviceId)
    let _this = this;
    window.onresize = function () {
      _this.chart1.resize();
    };
    this.timer = setInterval(() => {
      var time = new Date();
      if (parseInt(time - this.startTime) / 1000 > 20) {
        //间隔秒数
        this.startTime = time;
        this.GetDayliyAlarmInfo(this.deviceId);
        this.GetRealEnergyData(this.deviceId);
      }
      this.GetRealPassData();
    }, 2000);
  },
  beforeDestroy() {
    //页面关闭时清除定时器
    clearInterval(this.timer);
  },

  methods: {
    // 实时能耗数据
    GetRealEnergyData(deviceid) {
       GetRealEnergyData(deviceid).then((res) => {
        if (res.success) {
          var model = res.data;
          this.CurrentValue =model.CurrentA;
          this.VolValue =model.VoltageA;
          this.totalEnergy = model.EPI_power;
          this.Voloption.series[0].data[0].value =this.VolValue;
          this.Currentoption.series[0].data[0].value =this.CurrentValue;
            this.CurrentChart.setOption(this.Currentoption);
            this.VolChart.setOption(this.Voloption);
        }
      });
    },
    //通道实时数据
    GetRealPassData() {
      GetRealPassData(this.deviceId).then((res) => {
        if (res.success) {
          this.devicePassList = res.data;
        }
      });
    },
    // 实时报警数据
    GetDayliyAlarmInfo(deviceid) {
      GetDayliyAlarmInfo(deviceid).then((res) => {
        if (res.success) {
          var alarmlist = res.data;
          this.alarmMsg = "";
          for (let i = 0; i < alarmlist.length; i++) {
            this.alarmMsg +=
              alarmlist[i].CreatTime +
              "  " +
              alarmlist[i].AlarmDetailInfo +
              "\n";
          }
        }
      });
    },
    // 获取当月能耗数据
    MonthEnergyUsed(deviceid) {
      MonthEnergyUsed(deviceid).then((res)=>{
        if (res.success) {
          this.YData = res.data;
          this.option1.series.data = this.YData;
          this.chart1.setOption(this.option1);
        }
      });
    },
    // 表头行高与字体
    headerStyle() {
      return {
        "font-size": "10px",

        height: "10px",
        background: "#5B9BD5",

        padding: "0",
      };
    },
    // 内容行高与字体
    cellStyle() {
      return {
        "font-size": "15px",
        height: "30px",
        padding: "0",
      };
    },
    initChart() {
      this.CurrentChart = this.$echarts.init(
        document.getElementById("CurrentChart")
      );
      this.VolChart = this.$echarts.init(document.getElementById("VolChart"));
      this.chart1 = this.$echarts.init( document.getElementById("chart1"), "dark" );
      this.Currentoption = {
        series: [
          {
            radius: "100%", // 占满容器
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 240,
            splitNumber: 6,
            itemStyle: {
              color: "#58D9F9",
              shadowColor: "rgba(0,138,255,0.45)",
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              length: "65%",
              width: 6,
              offsetCenter: [0, "5%"],
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 18,
              },
            },
            axisTick: {
              splitNumber: 2,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            splitLine: {
              length: 12,
              lineStyle: {
                width: 3,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 10,
              color: "#999",
              fontSize: 10,
            },
            title: {
              show: false,
            },
            detail: {
              fontSize: 24,
              offsetCenter: [0, "35%"],
              valueAnimation: true,
              formatter: function (value) {
                return (
                  "当前电流  " + "{value|" + value.toFixed(0) + "}{unit|A}"
                );
              },
              rich: {
                value: {
                  fontSize: 20,
                  fontWeight: "bolder",
                  color: "#fff",
                },
                unit: {
                  fontSize: 20,
                  color: "#999",
                  padding: [0, 0, 0, 10],
                },
              },
            },
            data: [
              {
                name: "当前电流",
                value: this.CurrentValue,
              },
            ],
          },
        ],
      };
      this.Voloption = {
        series: [
          {
            radius: "100%", // 占满容器
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 240,
            splitNumber: 6,
            itemStyle: {
              color: "#58D9F9",
              shadowColor: "rgba(0,138,255,0.45)",
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              length: "65%",
              width: 6,
              offsetCenter: [0, "5%"],
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 18,
              },
            },
            axisTick: {
              splitNumber: 2,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            splitLine: {
              length: 12,
              lineStyle: {
                width: 3,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 10,
              color: "#999",
              fontSize: 10,
            },
            title: {
              show: false,
            },
            detail: {
              fontSize: 24,
              offsetCenter: [0, "35%"],
              valueAnimation: true,
              formatter: function (value) {
                return (
                  "当前电压  " + "{value|" + value.toFixed(0) + "}{unit|V}"
                );
              },
              rich: {
                value: {
                  fontSize: 20,
                  fontWeight: "bolder",
                  color: "#fff",
                },
                unit: {
                  fontSize: 20,
                  color: "#999",
                  padding: [0, 0, 0, 10],
                },
              },
            },
            data: [
              {
                value: this.VolValue,
              },
            ],
          },
        ],
      };
      this.option1 = {
        title:{
          subtext:"用电量趋势图"
        },
        grid: {
          left: "50px",
          top: "50px",
          right: "50px",
          bottom: "30px",
        },
        xAxis: {
          type: "category",
          data: this.XData,
        },
        yAxis: {
          type: "value",
        },
        series: {
          // backgroundStyle: {
          //   color: "#212b4d",
          // },
          data: this.YData,
          type: "bar",
        },
      };

      this.CurrentChart.setOption(this.Currentoption);
      this.VolChart.setOption(this.Voloption);
      this.chart1.setOption(this.option1);
    },
  },
};
</script>
<style lang="scss" scoped>
.contain {
  padding: 12px;
  background-color: #212b4d; //#08134b;
  width: 100%;
  height: 100%;
  color: #fff;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6%;
  background: url("../../../assets/images/titleImg.png") no-repeat center center;
  font-size: 36px;
  font-weight: 300;
  color: #fff;
}
.content_main {
  height: 94%;
}

.quarter-div {
  width: 49%;
  height: 49%;
  float: left;
  border-radius: 20px;
  border: aqua solid 1px;
  margin: 5px 5px 0px 0px;
}

.lefttop-content {
  display: flex;
  flex-flow: column;
}
#CurrentChart,
#VolChart {
  margin-top: 20px;
  height: 130px;
  width: 100%;
}
#chart1 {
  padding: 10px;
  height: 0;
  width: 100%;
  flex: 1;
}
.smallTitle {
  background-color: #33c073;
  text-align: center;
  margin-top: 10px;
  font-size: 18px;
  margin-left: 10px;
  margin-right: 10px;
}

.alarmdiv {
  overflow: auto;
  font-size: 20px;
  padding: 10px 0px 0px 20px;
  margin-top: 10px;
  width: 700px;
  height: 180px;
  color: red;
  border-radius: 20px;
  border: yellow solid 3px;
  float: left;
}
</style>
